<template>
  <div class="topic-item-wrapper">
      <el-row class="topic">
          <el-col :span="2">{{ ordinal }}</el-col>
          <el-col :span="14">{{ topic.title }}</el-col>
          <el-col :span="4">{{ topic.author }}</el-col>
          <el-col :span="4">
              <el-button type="primary" size="small" @click="openDetail">详情</el-button>
              <el-button type="primary" size="small" @click="openComment">评论</el-button>
          </el-col>
      </el-row>
      <!-- 为 el-input 绑定 ref 属性，将来可以通过 $refs.commentInput 获得该组件 -->
      <el-input type="text" v-model="commentContent" v-show="visible" ref="commentInput" @blur="hide">
        <template #append>
          <el-button @click="publishComment">发布评论</el-button>
        </template>
      </el-input>
  </div>
</template>

<script>
export default {
  name: 'TopicItem',
  props: {
    ordinal: { type: Number , required: true },
    topic: { type: Object, required: true }
  },
  data(){
      return {
          commentContent: '',
          visible: false
      }
  },
  methods: {
    openDetail(){
      console.log( `即将展示${this.topic.id}的详情` );
      // 编程式导航
      this.$router.push( { name: 'topic-detail' , params: { id: this.topic.id } } );
      // this.$router.push( { path:`/topic/detail/${ this.topic.id }` } );
    },
    openComment(){
      this.visible = true;
      console.log( this.$refs );
      this.$refs.commentInput.focus();
    },
    publishComment(){
      this.hide();
    },
    hide(){
      this.visible = false ;
    }
  }
}
</script>

<style>
.topic-item-wrapper {
    margin: 10px auto;
    border-bottom: 1px solid #dedede ;
}
</style>